<template>
	<div class="open">
		<p class="nav">添加功能/功能详情</p>
		<div class="content">
			<div class="open-confirm">
				<div class="avatar">
					<img src="../../../../assets/images/abao/abao.png" height="100%" width="100%">
				</div>
				<div class="open-info">
					<h4 class="title">卡券功能</h4>
					<p class="status">未开通</p>
				</div>
				<div class="confirm-btn" @click="confirmOpen">开通</div>
				<p @click="goBack">返回</p>
			</div>
			<div class="desc-warrp">
				<h4 class="desc-title">
					<span class="el-icon-tickets" style="color: #63ade0;"></span>
					<span>功能介绍</span>
				</h4>
				<div class="desc-con">
					<p>
						卡券功能，是提供给商户或第三方的一套派发优惠券，经营管理会员的工具，可在宝店创建卡券，多种渠道投放给用户，放给用户放给用户放给用户，进行对账。
					</p>
					<p>主要能力：</p>
					<p>● 卡券功能，是提供给商户或第三方的一套派发优惠券，</p>
					<p>● 卡券功能，是提供给商户或第三方的一套派发优惠券，</p>
					<p>● 卡券功能，是提供给商户或第三方的一套派发优惠券，</p>
					<p>● 卡券功能，是提供给商户或第三方的一套派发优惠券，</p>
				</div>

			</div>			
			<div class="desc-warrp">
				<h4 class="desc-title">
					<span class="el-icon-warning" style="color: #f86161;"></span>
					<span>声明</span>
				</h4>
				<div class="desc-con">
					<p>● 卡券功能，是提供给商户或第三方的一套派发优惠券，</p>
				</div>

			</div>
		</div>
	</div>
</template>
<script>
	export default{
		name : 'openFunction',
		data(){
			return{

			}
		},
		methods:{
			confirmOpen(){
				let code = 100
				if(code === 100){
					this.$message({
			          message: '恭喜你，开通成功',
			          type: 'success'
			        });
			        this.$emit('openOk')
				}
			},
			goBack(){
				this.$emit('goBack');
			}
		}
	}
</script>
<style lang="less" scoped>
	@bgColor:#f6f8f9;
	@btnColor:#3ca0ec;
	@fontColor:#9c8e9b;
	.open{
		padding-left: 10px;
		padding-bottom: 20px;
		background: @bgColor;
		.nav{
			padding-top: 20px;
		}
		.content{
			margin-top: 30px;
			padding-top: 30px;
			padding-bottom: 60px;
			background:#fff;
			.open-confirm{
				position: relative;
				width: 90%;
				height: 80px;
				margin: 0 auto;
				background:@bgColor;
				.avatar{
					overflow: hidden;
					position: absolute;
					top: 50%;
					left: 60px;
					height: 50px;
					width: 50px;	
					margin-top: -25px;
					border-radius: 50%;				
				}
				.open-info{
					margin-left: 150px;
					padding: 15px 0;
					box-sizing: border-box;
					.title{
						line-height: 25px;
					}
				}
				.confirm-btn{
					position: absolute;
					top: 50%;
					right: 30px;
					height: 30px;
					width:100px;
					margin-top: -15px;
					line-height:30px;
					text-align: center;
					background:@btnColor;
					border-radius: 3px;
					color: #fff;
					cursor: pointer;
				}
			}
			.desc-warrp{
				margin-top: 30px;
				padding-left: 20px;
				.desc-title{
					line-height:35px;
				}
				.desc-con{
					padding-left: 20px;
					p{
						line-height:24px;
						color: @fontColor;
					}
				}
			}
		}
	}
</style>